<template>
  <div class="mine-wrap" :class="{'mine-active':showPage == 2}">

    <div class="mine-box1" v-if="showPage == 1">
      <div class="pic-box">
        <img src="../../../images/empty.png" class="pic"/>
        <span class="login-nor">您还未登录账号~</span>
      </div>

      <div class="btn-box">
        <button type="button" class="btn" @click="login">立即登录</button>
      </div>
    </div>

    <div class="mine-box2" v-else>
      <div class="user-box">
        <img class="photo-box" :src="material.userImage" v-if="material.userImage"
             @click="showPic(material.userImage)"/>
        <div class="photo-box" v-else></div>

        <div class="nick-box">
          <span class="name">{{material.userName}}</span>
          <span class="phone">{{material.phone}}</span>
        </div>

        <div class="edit" @click="editMaterial">编辑个人资料</div>
      </div>

      <div class="item-con">
        <div class="item-box" @click="applyPage">
          <img src="./record.png" class="pic2"/>
          <span class="item">报名记录</span>
          <img src="../../../images/in.png" class="pic3"/>
        </div>
        <div class="item-box" @click="modifyPwd">
          <img src="./password.png" class="pic2"/>
          <span class="item">密码修改</span>
          <img src="../../../images/in.png" class="pic3"/>
        </div>
        <div class="item-box" @click="servicePage">
          <img src="./service.png" class="pic2"/>
          <span class="item">客服电话</span>
          <img src="../../../images/in.png" class="pic3"/>
        </div>
      </div>

      <div class="btn-box" @click="loginOut">
        <button type="button" class="btn">退出当前账号</button>
      </div>
    </div>

  </div>
</template>

<script>
  import {loginOut, selectMaterial} from "../../../axios/api"
  import {ImagePreview} from 'vant'

  export default {
    inject: ['reload'],
    data() {
      return {
        showPage: 0,
        identity: "",
        material: "",
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      if (sessionStorage.getItem("identity")) {
        this.identity = base64.decode(sessionStorage.getItem("identity"));
        this.showPage = 2;
        this.queryMaterial();
      } else {
        this.showPage = 1;
      }
    },
    methods: {
      showPic(pic) {//预览
        ImagePreview([pic]);
      },
      queryMaterial() {//获取个人资料
        this.$vux.loading.show({
          text: '加载中',
        });

        let params = {
          "sgin": this.identity
        };
        selectMaterial(params).then((res) => {
          this.$vux.loading.hide();
          console.log(JSON.stringify(res.data))
          if (res.code == 0 && res.data != null) {
            this.material = res.data;
          }
        });
      },
      editMaterial() {//编辑个人资料
        this.$router.push({
          path: "/material",
          query: {
            "portrait": this.material.userImage,
            "nickname": this.material.userName,
            "mobile": this.material.phone
          }
        });
      },
      servicePage() {//客服
        this.$router.push("/service");
      },
      modifyPwd() {//修改密码
        this.$router.push("/modifypwd");
      },
      applyPage() {//报名记录
        this.$router.push("/applyrecord");
      },
      login() {
        this.$router.push("/login");
      },
      loginOut() {//退出登录
        loginOut().then(res => {
          sessionStorage.clear();
          this.reload();
        });
      }
    },
    components: {
      ImagePreview
    }
  }
</script>

<style lang="less" scoped>
  @import "../../../assest/mixin";

  .mine-wrap {
    .who(100%, 100%, hidden);
    .mine-box1 {
      display: flex;
      align-items: center;
      flex-direction: column;
      margin-top: 2.187rem;
      .pic-box {
        position: relative;
        margin-bottom: 0.613rem;
        .wh(5.707rem, 5.707rem);
        .pic {
          .wh(100%, 100%);
        }
        .login-nor {
          position: absolute;
          bottom: 0.333rem;
          left: 0;
          right: 0;
          margin: auto;
          .size-color(0.373rem, rgba(153, 153, 153, 1));
          text-align: center;
        }
      }
    }
    .mine-box2 {
      .wh(100%, auto);
      .user-box {
        display: flex;
        align-items: center;
        margin-bottom: 0.267rem;
        .wh(100%, 3.2rem);
        background: @talent-bg-color;
        .photo-box {
          margin-left: 0.32rem;
          margin-right: 0.52rem;
          .wh(1.6rem, 1.6rem);
          background: rgba(245, 245, 245, 1);
          .border-radius(50%);
        }
        .nick-box {
          display: flex;
          flex-direction: column;
          .name {
            padding-bottom: 0.16rem;
            .size-color-weight(0.48rem, rgba(51, 51, 51, 1), 500);
          }
          .phone {
            padding-top: 0.16rem;
            .size-color(0.373rem, rgba(153, 153, 153, 1));
          }
        }
        .edit {
          .fj(center, center);
          margin-left: auto;
          margin-right: 0.32rem;
          .wh(2.293rem, 0.48rem);
          background: rgba(245, 245, 245, 1);
          .border-radius(0.24rem);
          .size-color(0.32rem, rgba(161, 171, 178, 1));
        }
      }
      .item-con {
        margin-bottom: 1.2rem;
        .wh(100%, auto);
        background: @talent-bg-color;
        .item-box {
          display: flex;
          align-items: center;
          margin-left: 3.2%;
          .wh(96.8%, 1.333rem);
          border-bottom: @talent-border-bottom;
          &:last-child {
            border-bottom: none;
          }
          .pic2 {
            padding-left: 0.32rem;
            padding-right: 0.2rem;
            .wh(0.667rem, 0.667rem)
          }
          .item {
            .size-color(0.427rem, rgba(51, 51, 51, 1));
          }
          .pic3 {
            margin-left: auto;
            margin-right: 0.32rem;
            .wh(0.32rem, 0.32rem)
          }
        }
      }
    }
    .btn-box {
      margin: 0 auto;
      .wh(7.2rem, 1.173rem);
      .btn {
        .wh(7.2rem, 1.173rem);
        background: @talent-button-color;
        .border-radius(0.16rem);
        .size-color-weight(0.453rem, rgba(255, 255, 255, 1), 500);
      }
    }
  }

  .mine-active {
    background: @talent-theme-bg-color;
  }
</style>
